<template>
	<div>
		<ht-wd-list :tableData="tableData" :type="type" @add="add" @del="del" @click="look" />
		<el-dialog v-if="dialogVisible" title="添加问题" :visible.sync="dialogVisible" width="60%">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				<el-form-item label="标题" prop="title">
					<el-input v-model="ruleForm.title"></el-input>
				</el-form-item>
				<el-form-item label="标签" prop="label_name">
					<el-select v-model="ruleForm.label_name" placeholder="请选择标签">
						<el-option v-for="item in list" :key="item.id" :label="item.label_name" :value="item.label_name"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="排序" prop="order">
					<el-input-number v-model="ruleForm.order" controls-position="right" :min="0" :max="10"></el-input-number>
				</el-form-item>
				<el-form-item label="允许评论" prop="is_answer">
					<el-switch v-model="ruleForm.is_answer" active-color="#13ce66" inactive-color="#ccc"></el-switch>
				</el-form-item>
				<el-form-item label="状态" prop="state">
					<el-radio-group v-model="ruleForm.state">
						<el-radio :label="false">待审核</el-radio>
						<el-radio :label="true">已发布</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="内容" prop="content">
					<div ref="text"></div>
				</el-form-item>
			</el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center">
				<el-button @click="resetForm">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { getQuestions, addQuestion, delQuestion, getQuestionLabel } from '@/api/questions';
import E from 'wangeditor';
import store from '@/store';
import { formatDate } from '@/utils/formatTime';
export default {
	data() {
		return {
			tableData: [],
			rules: {
				title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
				label_name: [{ required: true, message: '请输入标签', trigger: 'change' }],
				order: [{ required: true, message: '请输入排序', trigger: 'change' }],
				is_answer: [{ required: true, message: '请选择是否允许回答', trigger: 'change' }],
				state: [{ required: true, message: '请选择状态', trigger: 'change' }],
				content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
			},
			dialogVisible: false,
			ruleForm: {
				title: '',
				label_name: '',
				order: 0,
				is_answer: false,
				state: 0,
				content: '',
			},
			multipleSelection: [],
			editor: null,
			type: 'questions',
			list: [],
		};
	},
	created() {
		this.getQuestions();
	},
	activated() {
		this.getQuestions();
	},
	methods: {
		async getQuestions() {
			this.tableData = await getQuestions();
		},
		handleSelectionChange(val) {
			this.multipleSelection = val;
		},
		async add() {
			this.dialogVisible = true;
			this.list = await getQuestionLabel();
			this.$nextTick(() => {
				let editor = new E(this.$refs.text);
				editor.config.focus = false;
				editor.config.onblur = () => {
					this.ruleForm.content = editor.txt.text();
					this.$refs.ruleForm.validateField('content');
				};
				editor.create();
				this.editor = editor;
			});
		},
		async del(id) {
            try {
                await delQuestion(id);
                this.$message.success('删除成功!');
				this.getQuestions();
            } catch (err) {
                console.log(err.message);
            }
		},
		submitForm() {
			setTimeout(() => {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						await addQuestion({ createtime: formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS'), ...store.state.userInfos.userInfos, ...this.ruleForm });
						this.$message.success('添加成功');
						this.resetForm();
						this.getQuestions();
					} else {
						return false;
					}
				});
			});
		},
		resetForm() {
			this.dialogVisible = false;
			this.editor = null;
			this.$refs.ruleForm.resetFields();
		},
		async look(id) {
			await getQuestions(id);
		},
	},
};
</script>

<style></style>
